<template>
	<view>
		<u-navbar title="添加商品規格" placeholder autoBack>
			<view class="flexright xiaohui" slot="right" @click="addList">新增</view>
		</u-navbar>
		<view style="padding-bottom: 180rpx;">
			<view class="mainpadding_top ffffff" v-for="(item,index) in spuList" :key="index">
				<view class="flexbetween">
					<view class="flexleft">
						<view class="titletext hei_text bold margin_right1">規格標題</view>
					</view>
					<view @click="delSpu(item,index)">
						<u-icon name="trash" color="#ff0000" size="18"></u-icon>
					</view>
				</view>
				<view class="bghui mainpadding_top radius">
					<input type="text" class="hei_text main_size bold" placeholder="請輸入規格標題" v-model="item.name">
				</view>
				<view class="flexbetween margin_top">
					<view class="titletext hei_text bold">必選數量</view>
					<u-radio-group v-model="item.fh" placement="row" circle>
						<u-radio activeColor="#feb800" :customStyle="{marginRight: '30rpx'}" label="等於" :name="1"></u-radio>
						<u-radio activeColor="#feb800" label="大於等於" :name="2"></u-radio>
					</u-radio-group>
				</view>
				<view class="bghui mainpadding_top radius">
					<input type="number" class="hei_text main_size bold" placeholder="請輸入必選數量(0為非必選)"
						v-model="item.num">
				</view>
				<view class="flexbetween margin_top">
					<view class="titletext hei_text bold">新增規格内容</view>
				</view>
				<view class="flexleft margin_top">
					<view class="names">
						<input type="text" placeholder="請輸入規格内容" v-model="item.arrtName">
					</view>
					<view class="add" @click="addAttr(item.arrtName,index)">添加</view>
				</view>
				<!-- 属性 -->
				<view class="bghui radius mainpadding_top flexleft" v-for="(value,i) in item.content" :key="i">
					<view class="">
						<view class="itemimgBox flexcenter margin_right2" v-for="(ite,it) in value.image_arr"
							:key="it">
							<!-- 已上传 -->
							<image class="listleftimg radius" :src="ite" mode=""></image>
							<view class="deleteimg" @click="deleimage(it,value.images,value.image_arr)"></view>
						</view>
						<view class="itemimgBox flexcenter margin_right2"
							@click="uploadImg(value.images,value.image_arr,1)" v-if="value.image_arr.length<1">
							<!-- 未上传 -->
							<image class="listleftimg radius" src="@/static/image/system/upimg.png" mode=""></image>
						</view>
					</view>
					<view class="">
						<view class="hei_text titletext bold">{{value.name}}</view>
						<view class="mainpadding_top ffffff radius flexbetween">
							<view class="flexleft">
								<view class="hui_text main_size bold" style="min-width: 100rpx;">價格：</view>
								<input type="number" class="huang_text main_size bold" v-model="value.money">
							</view>
							<view @click="delAttr(value,index,i)">
								<u-icon name="trash" color="#ff0000" size="16"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="mainpadding posibottom flexbetween" style="bottom: 0;">
				<view class="submitbtn margin_top1" style="width: 45%;" @click="jumpurl('/pages/workbench/guigefllb?type=1')">導入範例</view>
				<view class="submitbtn margin_top1" style="width: 45%;" @click="submit">確認</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				spuList: [],
			}
		},
		onLoad(options) {
			this.spuList = JSON.parse(decodeURIComponent(options.msg));
			uni.$on("checkggmb",data=>{
				data.forEach(item=>{
					if(item.ischeck){
						this.spuList.push({
							name: item.name, //规格标题
							num: item.num, //必选数量
							arrtName: "", //属性名称
							content: item.goods_spunat, //属性列表
							fh:item.fh
						})
					}
				})
				console.log(">>>>>>>>>",this.spuList);
			})
		},
		onUnload() {
			uni.$off("checkggmb")
		},
		methods: {
			submit(){
				uni.$emit("checkgge",this.spuList)
				uni.navigateBack(1)
			},
			addList() { //新增规格
				this.spuList.push({
					name: "", //规格标题
					num: "", //必选数量
					arrtName: "", //属性名称
					content: [], //属性列表
					fh:1,
				})
			},
			delSpu(item, index) { //刪除规格
				this.spuList.splice(index, 1)			},
			addAttr(arrtName, index) { //新增属性
				if (!arrtName) {
					this.http.toast("請先輸入規格内容！")
					return false
				}
				this.spuList[index].arrtName = ""
				this.spuList[index].content.push({
					name: arrtName, //属性名称
					price: "", //价格
					images: [], //规格图片
					image_arr: [], //规格图片展示
				})
			},
			delAttr(value, index, i) {
				this.spuList[index].content.splice(i, 1)
			},
			deleimage(i, upimg, arr) { //刪除图片
				upimg.splice(i, 1)
				arr.splice(i, 1)
			}
		}
	}
</script>

<style scoped>
	::v-deep.u-radio-group {
		flex: none !important;
	}
	.itemimgBox {
		width: auto;
		position: relative;
	}

	.names {
		width: 85%;
		border: 2rpx solid #ffb800;
		padding: 25rpx 30rpx;
		border-top-left-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
		border-right: none;
	}

	.add {
		width: 15%;
		color: #333;
		background-color: #ffb800;
		padding: 29rpx 20rpx 32rpx 28rpx;
		border-top-right-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
		text-align: center;
		font-size: 28rpx;
	}

	.line {
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid RGBA(247, 247, 247, 1);
	}
</style>